import { useState, useEffect } from 'react'
import {
    Button, Form,
    Input,
    DatePicker,
    Image,
    Upload,
    message
} from 'antd';
import { LeftOutlined, PlusOutlined } from '@ant-design/icons';
import './index.css'
import { getinfo, getpush } from '../../plugins/getlogin'
import { useNavigate } from 'react-router-dom';
export const Push = () => {
    const [aritle, setaritle] = useState([]);
    const [img, setimg] = useState('');
    const router = useNavigate()
    useEffect(() => {
        getinfo().then(e => {
            setaritle(e.data[0])
            setimg(e.data[1])

        })



    }, []);
    var math = Math.floor(Math.random() * 10 + 10)
    var listper = { id: math, header: img.img, name: aritle.username, title: '', picture: '', time: '', area: '' }
    const titleer = (e) => {
        listper.title = e.target.value
    }
    const area = (e) => {

        listper.area = e.target.value

    }
    //时间格式转化
    const formatDate = (d) => {
        var date = new Date(d);
        var YY = date.getFullYear() + '-';
        var MM =
            (date.getMonth() + 1 < 10
                ? '0' + (date.getMonth() + 1)
                : date.getMonth() + 1) + '-';
        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var hh =
            (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm =
            (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
            ':';
        var ss =
            date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return YY + MM + DD + ' ' + hh + mm + ss;
    }
    const date = (e) => {
        var time = formatDate(e._d)
        listper.time = time
    }
    const backpush = () => {
        router(-1)
    }

    //-----------------------------------未完成功能-------------------------------------------------------------------
    var imgs = ''
    const uploading = (e) => {
        console.log(e.file.originFileObj)
        const blob = new Blob([e.file.originFileObj], { type: 'image/jpeg' });
        const url = window.URL.createObjectURL(blob)
        listper.picture = url
    }
    const sumbit = () => {
        getpush(listper)
        message.success('发布成功！')
        router('/main')

    }
    const { TextArea } = Input;
    const { RangePicker } = DatePicker;

    return (
        <div>
            <div className='detals'>
                <LeftOutlined style={{ fontSize: '2rem' }} onClick={backpush} />
            </div>
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
                className='forms'
            >
                <Form.Item label="id"  >
                    <Input value={math} />
                </Form.Item>
                <Form.Item label="昵称">
                    <Input value={aritle.username} />
                </Form.Item>
                <Form.Item label="头像">
                    <Image

                        src={img.img}
                        className='hea'
                    />
                </Form.Item>
                <Form.Item label="标题" width={100}>
                    <Input onChange={titleer} />
                </Form.Item>
                <Form.Item label="封面图片" valuePropName="fileList">
                    <Upload listType="picture-card" onChange={uploading}>
                        <div>
                            <PlusOutlined />
                            <div
                                style={{
                                    marginTop: 8,
                                }}
                            >
                                上传
                            </div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="内容概述" style={{ width: '100vw' }} onChange={area}>
                    <TextArea rows={10} />
                </Form.Item>
                <Form.Item label="日期">
                    <DatePicker onChange={date} />
                </Form.Item>

                <Form.Item label="">
                    <Button type='primary' onClick={sumbit}>提交</Button>
                </Form.Item>
            </Form>
            <img src={imgs} alt="" />

        </div >
    )


}